import React,{Component} from 'react'
import './nav.css'
import {Icon} from 'antd'
import {NavLink} from 'react-router-dom'
import * as api from '../../api/userInfo'
export default class TopLinks extends Component{
    constructor(props){
        super(props)
        this.state={
            sty:{display:'block'},
            sty2:{display:'none'},
            nickName:''
        }
    }
    goBack(){
        localStorage.removeItem('token')
        this.setState({
            sty:{display:'block'},
            sty2:{display:'none'}
        })
    }
    componentDidMount(){
        let token = localStorage.getItem('token')
        if(!token){
            console.log('没有登陆')
            this.setState({
                sty:{display:'block'}
            })
        }else{
            api.UserInfo().then(data=>{
                // console.log(data.data.nickName)
                console.log(data)
                this.setState({
                    sty:{display:'none'},
                    sty2:{display:'block'},
                    nickName:data.data.nickName
                })
            })
        }
    }
    render(){
        return(
            <div style={{position:'relative',height:'88px',background:'#000'}}>
                <a className="logo">TRENDIANO</a>
                <ul className="topNav">
                   <li style={this.state.sty}>
                        <NavLink to="/login">登陆</NavLink>
                        <em>|</em>
                        <NavLink to="/register">注册</NavLink>
                   </li>
                   <li style={this.state.sty2}>欢迎您：{this.state.nickName}<em>|</em><a onClick={()=>this.goBack()}>退出</a></li>
                   <em>|</em> 
                   <li><NavLink to="/cart/myself">我的账户</NavLink></li> 
                   <li><a>我的收藏</a></li> 
                   <li><NavLink to="/cart">购物袋</NavLink></li> 

                </ul>
                <div className="search">
                    <input placeholder="请输入关键字搜索" />
                    <Icon style={{fontSize:'18px',marginRight:'4px',color:'#aaa'}} type="search" />
                </div>
            </div>
        )
    }
}